<template>
  <div id="school" v-if="data">
    <div class="f1">
      <div class="center">
        <div class="g-ldt">
          <ul class="ldt">
            <li>
              <img :src="data[`bts-header-hero-airpods-geoalt-202206.png`]" />
            </li>
          </ul>
          <ul class="ldt1">
            <li class="ldt-nr1">
              <h1>以教育优惠购买 Mac 或 iPa，</h1>
              <h1>另有 AirPods 搭配其中 。</h1>
            </li>
            <li class="ldt-nr2">
              <p>
                为高校生活购买 Mac 或 iPad，可以节省更多，还有 Apple Pencil
                和智能键盘优惠、八折加购 AppleCare+ 服务计划1
                及更多惊喜等着你。此次优惠活动面向在读及新录取的高校学生，以及各级教师和教职员工*。请先验证资格再开始选购。
              </p>
            </li>
            <li class="ldt-nr3">
              <button>通过 UNiDAYS 进行验证</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="f2">
      <div class="center">
        <ul>
          <li>入手这些 Apple 设备省更多。</li>
          <li>乐享教育优惠，还有 AirPods 搭配其中。</li>
        </ul>
        <div class="box">
          <div class="box-1">
            <img :src="data[`bts-grid-mba-m1-202206.png`]" />
            <h4>&nbsp;</h4>
            <h3>MacBook Air (M1 机型)</h3>
            <h5>RMB 7199 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-2">
            <img :src="data[`bts-grid-mba-m2-202206.png`]" />
            <h4>新款</h4>
            <h3>MacBook Air (M2 机型)</h3>
            <h5>RMB 8749 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-3">
            <img :src="data[`bts-grid-mbp13-202206.png`]" />
            <h4>新款</h4>
            <h3>MacBook Pro 13 英寸</h3>
            <h5>RMB 9249 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-4">
            <img :src="data[`bts-grid-mbp14-202206.png`]" />
            <h4>&nbsp;</h4>
            <h3>14 英寸 MacBook Pro</h3>
            <h5>RMB 13,899 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-5">
            <img :src="data[`bts-grid-mbp16-202206.png`]" />
            <h4>&nbsp;</h4>
            <h3>16 英寸 MacBook Pro</h3>
            <h5>RMB 17,499 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-6">
            <img :src="data[`bts-grid-imac-202206.png`]" />
            <h4>&nbsp;</h4>
            <h3>iMac</h3>
            <h5>RMB 9599 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-7">
            <img :src="data[`bts-grid-ipadair-202206.png`]" />
            <h4>&nbsp;</h4>
            <h3>iPad Air</h3>
            <h5>RMB 3999 起</h5>
            <p>含教育优惠</p>
          </div>
          <div class="box-8">
            <img :src="data[`bts-grid-ipadpro-202206.png`]" />
            <h4>&nbsp;</h4>
            <h3>iPad Pro</h3>
            <h5>RMB 5799 起</h5>
            <p>含教育优惠</p>
          </div>
        </div>
      </div>
    </div>
    <div class="f3">
      <div class="center">
        <button>通过 UNiDAYS 进行验证</button>
      </div>
    </div>
    <div class="f4">
      <div class="center">
        <ul>
          <li class="zi">
            <h3>需要协助选购？</h3>
          </li>
          <li class="zi-1">让 Apple Specialist 专家一对一帮你选购。</li>
        </ul>
        <div class="lian">
          <div class="lian-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 38 56"
              height="56"
              width="216"
            >
              <path
                fill="#6e6e73"
                d="M7.354,11.163c.248.008,1,.031,1.926,1.378L13.251,18.3a1.868,1.868,0,0,1-.159,2.731l-1.42,1.44a3.087,3.087,0,0,0-.539,3.853,24.852,24.852,0,0,0,4.27,5.144,36.8,36.8,0,0,0,5.231,4.378l.036.022.036.02a3.24,3.24,0,0,0,1.586.429,3.124,3.124,0,0,0,2.24-.972l1.44-1.421a1.988,1.988,0,0,1,1.374-.677,2.557,2.557,0,0,1,1.37.516l5.759,3.972c.9.614,1.351,1.24,1.351,1.861a3.853,3.853,0,0,1-1.215,2.452l-.036.039-.034.041c-.03.036-.063.071-.1.108-.063.068-.127.138-.192.213a7.39,7.39,0,0,1-6.008,2.388c-4.914,0-11.08-3.338-16.918-9.157-5.816-5.8-9.152-11.992-9.152-16.993a7.38,7.38,0,0,1,2.414-5.952l.028-.026.027-.027c.045-.045.087-.092.122-.122l.11-.078.1-.092a3.822,3.822,0,0,1,2.381-1.225h0m0-2A5.632,5.632,0,0,0,3.606,10.93a3.014,3.014,0,0,0-.377.337A9.32,9.32,0,0,0,.174,18.686c0,5.575,3.591,12.28,9.74,18.41,6.11,6.09,12.776,9.741,18.33,9.74a9.4,9.4,0,0,0,7.5-3.055c.118-.139.238-.258.337-.377A5.722,5.722,0,0,0,37.826,39.6,4.3,4.3,0,0,0,35.6,36.084l-5.753-3.968a4.421,4.421,0,0,0-2.505-.869,3.923,3.923,0,0,0-2.771,1.246l-1.448,1.428a1.177,1.177,0,0,1-.835.4,1.262,1.262,0,0,1-.614-.177,35.085,35.085,0,0,1-4.861-4.087,23.61,23.61,0,0,1-3.947-4.721,1.106,1.106,0,0,1,.218-1.448l1.428-1.448a3.85,3.85,0,0,0,.377-5.277l-3.968-5.753A4.422,4.422,0,0,0,7.415,9.164Z"
              />
            </svg>
            <h3>致电联系我们</h3>
            <p>400-666-8800</p>
          </div>
          <div class="lian-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 47 56"
              height="56"
              width="216"
            >
              <path
                fill="#6e6e73"
                d="M18.244,33.03c-.55.045-1.108.073-1.677.073-.419,0-.845-.013-1.266-.038l-.67-.04-.558.372a27.9,27.9,0,0,1-5.46,2.851A20.272,20.272,0,0,0,10,34.049l.965-1.843-1.879-.892C5.021,29.389,2.5,25.782,2.5,21.9c0-6.186,6.468-11.219,14.417-11.219,7.9,0,14.33,4.971,14.41,11.1a18.2,18.2,0,0,1,1.993-.123c-.157-7.2-7.367-12.981-16.4-12.981C7.782,8.683.5,14.594.5,21.9c0,4.794,3.075,9.014,7.723,11.219a28.187,28.187,0,0,1-2.457,3.6c-.75.941-.368,2,.956,2,1.824,0,5.546-1.72,8.459-3.661q.7.042,1.385.041c.557,0,1.106-.022,1.649-.062-.019-.26-.047-.518-.047-.782A10.553,10.553,0,0,1,18.244,33.03Z"
              />
              <path
                fill="#6e6e73"
                d="M46.5,34.26c0-5.858-5.839-10.6-13.165-10.6-.052,0-.1.006-.155.006a16.518,16.518,0,0,0-2.069.154c-5.63.763-9.985,4.365-10.792,8.914a8.684,8.684,0,0,0-.149,1.521c0,.183.023.359.033.539.346,5.839,6.227,10.043,13.413,10.043.367,0,.738-.011,1.111-.033,2.336,1.556,5.32,2.935,6.783,2.935,1.062,0,1.368-.849.767-1.6a22.578,22.578,0,0,1-1.97-2.888C44.034,41.484,46.5,38.1,46.5,34.26Zm-7.05,7.186-1.88.892.965,1.843c.122.233.26.472.406.71a23.465,23.465,0,0,1-3.106-1.747l-.558-.372-.67.04c-.333.02-.664.03-.992.03-6.371,0-11.366-3.715-11.44-8.476,0-.036-.007-.07-.007-.105a6.711,6.711,0,0,1,.343-2.075c.97-3,3.979-5.371,7.829-6.2a14.165,14.165,0,0,1,2.323-.3c.223-.01.445-.026.671-.026,6.157,0,11.165,3.856,11.165,8.6A8.188,8.188,0,0,1,39.45,41.445Z"
              />
            </svg>
            <a href="#">
              <h3>立即在线交流</h3>
              <p>立即在线交流></p>
            </a>
          </div>
          <div class="lian-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 36 56"
              height="56"
              width="216"
            >
              <path
                fill="#6e6e73"
                d="M23.6,23.883a3.383,3.383,0,0,0-1.568,2.822A3.222,3.222,0,0,0,24,29.689a6.884,6.884,0,0,1-1.008,2.1c-.624.9-1.312,1.812-2.3,1.812-1.008,0-1.248-.593-2.416-.593-1.12,0-1.52.609-2.432.609-.928,0-1.568-.834-2.3-1.876A9.18,9.18,0,0,1,12,26.85c0-2.87,1.872-4.394,3.7-4.394.992,0,1.792.641,2.4.641.592,0,1.488-.674,2.592-.674A3.415,3.415,0,0,1,23.6,23.883Zm-5.424-1.62c-.08,0-.144-.016-.208-.016,0-.048-.016-.16-.016-.273a3.287,3.287,0,0,1,.816-2,3.186,3.186,0,0,1,2.16-1.123,1.563,1.563,0,0,1,.016.289,3.387,3.387,0,0,1-.768,2.069A2.86,2.86,0,0,1,18.176,22.264Z"
              />
              <path
                fill="#6e6e73"
                d="M18,51.016a1.977,1.977,0,0,1-1.708-.96l-2.874-4.044H7a7.012,7.012,0,0,1-7-7V16.988A7,7,0,0,1,7,10H29a7,7,0,0,1,7,6.992V39.011a7.008,7.008,0,0,1-7,7l-6.473.085-2.819,3.959A1.977,1.977,0,0,1,18,51.016Zm-2.874-6.045L18,49.016l.054-.085,2.819-3.959a2,2,0,0,1,1.708-.959H29a5.006,5.006,0,0,0,5-5V16.992a5.01,5.01,0,0,0-5-5H7a5.006,5.006,0,0,0-5,5v22.02a5.009,5.009,0,0,0,5,5h6.415A2,2,0,0,1,15.126,44.971Z"
              />
            </svg>
            <a href="#">
              <h3>前往零售店</h3>
              <p>查找零售店</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/ZFWImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        console.log(res.data);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#school {
  width: 100%;
  height: 100%;
}
</style>
<style src="../assets/css/BackToSchool.css"></style